<template>
  <div class="c-footer">
    <div class="footer">
      <div class="about-img"></div>
      <div class="main-layer introduce">
        <div class="qrcode">
          <img src="./images/us_qrcode.jpg" alt="" />
        </div>
        <div class="text">
          <div>
            上海同济工程咨询有限公司（以下简称"同济咨询"）是同济大学优秀骨干企业，也是全国最早开展工程项目管理和工程咨询服务的试点单位之一。公司成立20多年来，始终秉承同济大学"严谨，求实，团结，创新"的精神服务于社会，以客户需求为我们服务的焦点，努力为客户提供优质的工程管理和技术咨询服务，并力争成为国内一流的综合性工程咨询服务企业。
          </div>
          <div>
            同济咨询依托同济大学在规划、建筑、工程管理、土木、环境、汽车、交通、机械、海洋等多学科的专业、人才和技术优势，经过自身20多年的积累和发展，现已具备国家发改委、住建部、财政部、质量监督局等多部委、多行业在工程咨询、工程项目管理、工程造价咨询、招投标代理、政府采购代理、工程监理、节能评估等领域的甲级资质或资格。
            主要包括工程项目的前期决策咨询和评估、工程项目管理与代建、工程造价咨询、招投标与采购代理、工程监理、工程技术咨询与管理、第三方评价与后评估等贯穿项目建设全过程的综合性或阶段性专项管理咨询服务，并积极为政府、行业、企业的发展提供决策和管理咨询服务。
          </div>
        </div>
      </div>
      <!-- <a href="javascript:;" class="more">了解更多</a> -->
    </div>
    <!-- <div class="copyright">此方案为奥哲网络科技有限公司设计版权所有，不得抄袭违者必究</div> -->
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({
  name: "CFooter",
  components: {}
})
export default class CFooter extends Vue {}
</script>

<style lang="less" scoped>
@import "~@/assets/style/mixin.less";
.c-footer {
  margin-top: 34px;
  color: white;
  .footer {
    background-color: #273972;
    position: relative;
  }

  .introduce {
    display: flex;
    background: url("./images/bg-1.png") right center no-repeat;
    height: 258px;
    transform: translateX(40px);
    padding-top: 50px;
    line-height: 180%;
    font-size: 13px;
    color: #dfe6fd;

    .text {
      padding-left: 30px;
      padding-right: 100px;
    }
  }

  .qrcode {
    flex-shrink: 0;
    width: 136px;
    height: 136px;
    background: url("./images/bg-3.png") center center no-repeat;
    background-size: 100%;
    position: relative;
    img {
      width: 90px;
      height: 90px;
      margin-top: 24px;
      margin-left: 22px;
    }
    &::after {
      content: "";
      height: 53px;
      position: absolute;
      border-left: 1px solid #d8d8d8;
      top: -50px;
      right: 57px;
      z-index: 0;
    }
  }

  .about-img {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -4px);
    width: 105px;
    height: 34px;
    background: url("./images/bg-2.png") center center no-repeat;
  }

  .more {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    color: #7aa0ff;
    font-size: 12px;
    padding-bottom: 14px;
    background: url("./images/bg-4.png") center bottom no-repeat;
  }

  .copyright {
    font-size: 12px;
    color: #7e7e7f;
    text-align: center;
    background-color: #f0f1f2;
    padding: 10px 0px;
  }
}
</style>
